<template>
    <div class="not-found">
        <img src=" ../../assets/image/404.png" alt="">
        <div class="not-found-info">
            <div class="name">当前页面未找到，<strong>{{ time }}</strong>秒后返回首页</div>
            <el-button round type="primary" @click="$router.push('/')">回到首页</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const time = ref(3)
const router = useRouter()
const timeInterval = setInterval(() => {
    time.value--
    if (time.value == 0) {
        router.push('/')
    }
}, 1000)

onUnmounted(() => {
    clearInterval(timeInterval)
})
</script>

<style lang="scss" scoped>
.not-found {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 500px;
        height: 500px;
        margin-right: 30px;
    }

    .not-found-info {
        font-size: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .el-button {
            width: 150px;
            height: 40px;
            margin-top: 20px;
        }
    }
}
</style>